<template>
    <div>
        <el-breadcrumb >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item >分类管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-button-group>
            <el-button :autofocus="true" @click="changeType(1)">上传分类</el-button>
            <el-button @click="changeType(2)">评论分类</el-button>
            <el-button @click="changeType(3)">相册分类</el-button>
        </el-button-group>

        <el-tree
        :data="tree"
        :props="defaultProps"
        :highlight-current="true"
        node-key="id"
        accordion
        style="width:250px;margin-top:20px;"
        @node-click="handleNodeClick">
        </el-tree>

        <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" style="width:600px;margin-top:20px">
        <el-form-item
            label="分类名称"
            prop="label"
            :rules="[
            { required: true, message: '分类名称不能为空'},
            ]"
        >
            <el-input type="text" v-model="numberValidateForm.label" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="addRootNode">添加根节点</el-button>
            <el-button type="primary" @click="editNode()">修改</el-button>
            <el-button type="danger" @click="remove()">删除</el-button>
            <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
            <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>
<script>
import Axios from 'axios';
    export default {
        data(){
            return{
                _id:null,
                currentNodelabel:'',
                numberValidateForm: {
                    _id:null,
                    type:1,
                    label: '',
                    parentId:null,
                    currentParentId:null
                },
                tree:[],
                defaultProps: {
                children: 'children',
                label: 'label'
                },
            }
        },
        methods:{
            changeType(type){
                this.getTreeData(type);
                this.numberValidateForm.type = type;
            },
             getTreeData(type){
                Axios({
                    method:"get",
                    url:`http://localhost:3000/cate/${type}`,
                    dataType:'json',
                }).then(res=>{
                    this.tree = res.data;
                    console.log(res.data);
                })
            },
            handleNodeClick(data) {
                this._id = data._id;
                this.numberValidateForm.parentId = data._id;
                this.numberValidateForm.currentParentId =data.parentId;
                this.currentNodelabel = data.label;
            },
            editNode(){
                this.numberValidateForm._id = this._id;
                this.numberValidateForm.parentId = this.numberValidateForm.currentParentId;
            },
            addRootNode(){
                this.numberValidateForm._id=null;
                this.numberValidateForm.parentId=null;
            },
            remove(){
                Axios({
                    method:'delete',
                    url:`http://localhost:3000/cate/${this._id}`,
                    dataType:'json'
                    }).then(res=>{
                        this.$message({
                        message: '删除成功！',
                        type: 'success'
                        });
                        this.getTreeData(this.numberValidateForm.type);
                        var type = this.numberValidateForm.type;
                        Object.assign(this.$data.numberValidateForm,this.$options.data().numberValidateForm);
                        this.numberValidateForm.type = type;
                    })
            },
            submitForm(formName) {
                var url,method;
                console.log(this.numberValidateForm.id);
                if(this.numberValidateForm._id !=null){
                    url = `http://localhost:3000/cate/data/`+this.numberValidateForm._id;
                    method = 'PUT';
                }else{
                    url = `http://localhost:3000/cate/data`;
                    method ='POST';
                }
                
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        Axios({
                            method:method,
                            url:url,
                            data:this.numberValidateForm,
                            dataType:'json',
                        }).then(res=>{
                            this.$message({
                            message: '提交成功！',
                            type: 'success'
                            });
                            this.getTreeData(this.numberValidateForm.type);
                            var type = this.numberValidateForm.type;
                            Object.assign(this.$data.numberValidateForm,this.$options.data().numberValidateForm);
                            this.numberValidateForm.type = type;
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        created(){
            this.getTreeData(1);
        }
    }
</script>